<!--
* @Author: white_queen
* @Date: 2025-01-07 21:21:37
* @LastEditors: white_queen
* @LastEditTime: 2025-01-07 21:30:29
* @FilePath: /components/projectItem/projectItem.vue
* @Description: 项目展示组件
-->
<template>
	<view class="list">
		<view class="item" v-for="item in 4" :key="item">
			<image class="img" src="https://picsum.photos/300/300" mode="widthFix"></image>
			<view class="name">项目名称</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'projectItem',
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.list {
	width: 690rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.item {
		width: 300rpx;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		overflow: hidden;
		.img {
			width: 300rpx;
		}
		.name {
			width: 100%;
			white-space: nowrap; /* 禁止文本换行 */
			overflow: hidden; /* 隐藏超出容器的内容 */
			text-overflow: ellipsis; /* 使用省略号表示被隐藏的内容 */
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #000;
		}
	}
}
</style>
